<template>
  <view>
    <image
      src="https://static.tospurfang.com/asset/mp-login.png"
      mode="scaleToFill"
      style="width: 750rpx; height: 939rpx" />

    <view style="position: fixed; bottom: 280rpx; width: 620rpx; height: 100rpx; left: 65rpx">
      <button
        :class="['btn wx-btn', { disabled: !agree }]"
        :disabled="!agree"
        style="background: #042275"
        open-type="getPhoneNumber"
        @getphonenumber="onPhone">
        <view style="font-size: 24rpx; color: #ffffff">同意隐私协议并授权手机号</view>
      </button>
      <view
        v-if="!agree"
        @click="onClick"
        class="dt-position-absolute dt-left-0 dt-top-0"
        style="width: 100%; height: 100%"></view>
    </view>
  </view>
</template>

<script setup>
  import dt from '@dt/dt'
  import { onUnmounted, ref } from 'vue'
  import userMgr from '../biz/index'

  defineProps({ agree: Boolean })
  const emits = defineEmits(['success'])

  const phone = ref()

  function login() {
    userMgr.loginByAuth(phone.value).then(() => {
      emits('success')
    })
  }

  function onPhone(e) {
    if (e.detail.errMsg.indexOf(':ok') > 0) {
      dt.biz.auth.phone(e.detail.iv, e.detail.encryptedData).then((res) => {
        phone.value = res.phone
        login()
      })
    } else {
      console.error(e.detail.errMsg)
    }
  }

  function onClick() {
    uni.showToast({
      title: '请先阅读并勾选协议',
      icon: 'none'
    })
  }

  onUnmounted(() => {})
</script>

<style lang="scss" scoped>
  .btn {
    height: 100rpx;
    line-height: 100rpx;
    background: #ffffff;
    border-radius: 12rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
  }

  .wx-btn {
    border: none;
  }
  .disabled {
    opacity: 0.4;
  }
</style>
